---
order: 1
title: 导出到 H5
type: 多平台导出
label: Platform
---

## 平台配置说明

导出到 H5 平台，除了通用导出配置外，并没有额外的平台相关导出配置，故无需配置

## 导出

选择好 H5 平台后，点击导出面板最下方的下载按钮，即可导出所需工程：

<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*jINgTIhAuDgAAAAAAAAAAAAADjCHAQ/fmt.webp" />

导出到本地后，目录结构如下：

```shell
├── public # 📁 公共资源目录
│		├── scene.json # 场景文件
│   └── ... # 其他
├── src # 📁 源代码目录
│   └── ... # 其他
├── index.html # ⚙️ 示例项目入口文件
├── main.js # ⚙️ 组件代码入口
├── package.json # ⚙️ 项目配置文件
├── project.json # ⚙️ 编辑器导出工程配置
├── tsconfig.json # ⚙️ TypeScript 配置文件
├── vite.config.ts # ⚙️ vite 配置文件
└── ... # 其他
```

**备注：** 因为 React/Vue/Vanilla JS 均属于 H5 平台，且大同小异，文档统一以 React 进行说明

## 调试

1、进入导出工程的根目录，执行安装命令如下：
```bash
npm i 或者 pnpm i
```

2、执行 dev 命令将项目本地跑起来，如下：
```bash
npm run dev
```
执行完上述命令后，如果成功，将出现如下内容：

<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*FJI5Q7qhFu4AAAAAAAAAAAAADjCHAQ/fmt.webp" />

3、在浏览器中，输入上述 Local 或者 Network 的 URL 即可预览实际运行效果，如下：

<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*Q9qwQqivKp8AAAAAAAAAAAAADjCHAQ/fmt.webp" />

## 构建

本地完成开发调试后，执行 build 命令进行构建，如下：
```bash
npm run build
```
如果命令执行成功，会在根目录下生成一个 **dist** 文件夹，里面存放了构建产物。可以将产物上传 CDN，当作动态加载的内容，如果项目是当作一个 React 组件，也可以发布至 NPM。

> 导出到 H5 平台的 React/Vue/Vanilla JS 各类项目，根据各自框架说明自行部署即可
